extends layout

block append style
  link(rel="stylesheet" href="./css/flexcpc.css")
  script(type="text/javascript" src="./js/native.js")

block content
  :markdown
    ## Guides

    Mongoose guides provide detailed tutorials on Mongoose's core concepts and
    integrating Mongoose with external tools and frameworks.

    ### Mongoose Core Concepts

    * [Schemas](./guide.html)
    * [SchemaTypes](./schematypes.html)
    * [Connections](./connections.html)
    * [Models](./models.html)
    * [Documents](./documents.html)
    * [Subdocuments](./subdocs.html)
    * [Queries](./queries.html)
    * [Validation](./validation.html)
    * [Middleware](./middleware.html)
    * [Populate](./populate.html)
    * [Discriminators](./discriminators.html)
    * [Plugins](./plugins.html)

    ### Integrations

    * [Custom SchemaTypes](./customschematypes.html)
    * [Promises](./promises.html)
    * [AWS Lambda](./lambda.html)
    * [Browser Library](./browser.html)
    * [GeoJSON](./geojson.html)
    * [Transactions](./transactions.html)
    * [MongoDB Driver Deprecation Warnings](./deprecations.html)
    * [Testing with Jest](./jest.html)
    * [Working with Dates](./tutorials/dates.html)

    ### Migration Guides

    * [Mongoose 4.x to 5.x](./migrating_to_5.html)
    * [Mongoose 3.x to 4.x](./migration.html)

block append layout
  script.
    _native.init("CK7DT53U", {
      targetClass: 'native-js',
      display: 'flex',
      visibleClass: 'native-show'
    });

  div(class="native-js").
    <div class="native-sponsor">Sponsored by #native_company# — Learn More</div>
    <a href="#native_link#" class="native-flex">
      <style>
      .native-js {
        background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
      }

      .native-details,
      .native-sponsor,
      .native-bsa {
        color: #native_color# !important;
      }

      .native-details:hover {
        color: #native_color_hover# !important;
      }

      .native-cta {
        color: #native_cta_color#;
        background-color: #native_cta_bg_color#;
      }

      .native-cta:hover {
        color: #native_cta_color_hover;
        background-color: #native_cta_bg_color_hover#;
      }
      </style>
      <div class="native-main">
        <img class="native-img" src="#native_logo#">
        <div class="native-details">
          <span class="native-company">#native_title#</span>
          <span class="native-desc">#native_desc#</span>
        </div>
      </div>
      <span class="native-cta">#native_cta#</span>
    </a>
